Skip to main content

🕹ī¸ Buttons

Buttons are essential interactive elements that facilitate user interactions within your app. AppStruct offers a variety of prebuilt buttons that can be easily customized to fit your application's design and functionality.

Available Components:

  • Button
  • Small Button
  • Icon Button
  • Text Link
tip

Each component is fully customizable, allowing you to drag and drop, resize, and tailor them to fit your app's specific needs. Additionally, every component supports adding actions, setting styles for specific screen sizes, and extensive customization to enhance functionality and design.

info

The settings available in the left and right toolbar may vary depending on the selected component.

1. Button​

  1. Add the Button:
    • Drag and drop the Button onto the Canvas.
  2. Position and Resize:
    • Place the button where desired and adjust its size using percentage values or by dragging its edges.
  3. Customize the Button:
    • Left Toolbar:
      • Change Text: Modify the button label within the text box.
      • Add Icon: Select and position an icon within the button.
      • Add Action: Click on "Add Action" to define what happens when the button is clicked.
      • Set Styles for Specific Screen Sizes: Tailor the button's appearance for different devices.
    • Right Toolbar:
      • Access comprehensive customization options, including color, border, shadow, and more.

2. Small Button and Icon Button​

  1. Add the Button:
    • Drag and drop the Small Button or Icon Button onto the Canvas.
  2. Position and Resize:
    • Place the button in the desired location and adjust its size as needed.
  3. Customize the Button:
    • Left Toolbar:
      • Add Icon: Select and position an icon within the button.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the button's appearance for different devices.
    • Right Toolbar:
      • Utilize all available customization features, such as color, border, shadow, and more.

3. Text Link​

  1. Add the Text Link:
    • Drag and drop the Text Link component onto the Canvas.
  2. Position and Resize:
    • Place the text link where desired and adjust its size accordingly.
  3. Customize the Text Link:
    • Left Toolbar:
      • Change Text: Modify the link text within the text box.
      • Add External Link: Insert a URL to link to an external web source.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Tailor the link's appearance for different devices.
    • Right Toolbar:
      • Access extensive customization options, including color, font style, and more.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].

Happy Building with AppStruct!